class Enlarge
{
    constructor(el,options = {} )
    {
        // 1. 保存全局信息
        this.el = document.querySelector(el)
        this.img = this.el.querySelector('.img')
        this.mask = this.el.querySelector('.mask')
        this.enlarge = this.el.querySelector('.enlarge')
        
        // 2. 默认调用
        this.init()
    }
    
    init() {
    this.overOut()
    this.enlargeSetWH() 
        this.maskMove()
        // this.enlargeSetWH()
        // this.maskMove()
        // this.enlargeSetBg()
        // this.smallImgChange()
    }
    maskMove()
    {
        // 1 给图片绑定移动事件
        // this.img.onmousemove = function(evt) { 
        this.img.onmousemove = (evt) => { 
            // 2 事件处理函数中：遮罩框移动
            // 3 先获取事件对象
            let e = evt || window.event
            // 4设置遮罩框的left、top： 获取坐标
            let left = e.pageX - this.el.offsetLeft - this.mask.offsetWidth/2
            let top = e.pageY - this.el.offsetTop - this.mask.offsetHeight/2
            // 5设置遮罩框的left、top： 限制
            if (left<0) left=0
            if (top<0) top=0
            let maxLeft = this.img.offsetWidth - this.mask.offsetWidth
            let maxTop = this.img.offsetHeight - this.mask.offsetHeight
            if (left>maxLeft) left = maxLeft
            if (top>maxTop) top = maxTop
            // 6设置遮罩框的left、top： 设置
            this.mask.style.left = left+'px'
            this.mask.style.top = top+'px'
            // 7 同步放大镜
            this.enlargeSetBg(left, top) 
        }
    }
    /**
     * 同步背景
     * @param {Number} left 
     * @param {Number} top  
     */
    enlargeSetBg(left, top)
    {
        let maskW = this.mask.offsetWidth 
        let enlargeW = parseInt(this.enlarge.style.width)

        let data = enlargeW/maskW  // 400/200 =2 

        this.enlarge.style.backgroundPosition = `-${left*data}px -${top*data}px`
    }

    
    /**
     * 判断标签【非行内】样式
     * @param object string 
     * @return string
     */

    getStyle(tagObj,cssAttr){
        if(window.getComputedStyle){
            return getComputedStyle(tagObj)[cssAttr] 
        } else{
            return tagObj.currentStyle[cssAttr]
        }

    }
    enlargeSetWH(){
        /* let maskW = this.mask.offsetWidth
        let maskH = this.mask.offsetHeight */
        let maskW = parseInt(this.getStyle(this.mask, 'width'))
        let maskH = parseInt(this.getStyle(this.mask, 'height'))

        let temp = this.getStyle(this.enlarge,'background-size')
        let enlargeBgW = parseInt(temp.split(' ')[0])
        let enlargeBgH = parseInt(temp.split(' ')[1])

        let imgW = this.img.clientWidth
        let imgH = this.img.clientHeight

        let w = maskW * (enlargeBgW/imgW)
        let h = maskH * (enlargeBgH/imgH)
/* console.log(maskW,enlargeBgW,imgW); */
        this.enlarge.style.width = w + 'px'
        this.enlarge.style.height = h + 'px'
    }   
    overOut(){
        this.img.onmouseover = () => this.mask.style.display = this.enlarge.style.display = 'block'
        this.img.onmouseout = () => this.mask.style.display = this.enlarge.style.display = 'none'
    }
}


export default Enlarge